@use "@/styles/usenamespace.scss" as ns;
@use "@/styles/mixin.scss" as mixin;
@use "@/styles/function.scss" as fun;

@mixin t() {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
@mixin effect() {
  @keyframes fade {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }
  @include ns.s(effect) using ($s) {
    $animation: fade 1s linear forwards;
    @include ns.b(image) using ($b) {
      @include ns.e(loading) using ($e) {
        animation: $animation reverse;
      }
      @include ns.e(image) using ($e) {
        animation: $animation;
        height: 100%;
      }
    }
  }
}
@include ns.b(image) using ($b) {
  @include effect();
  @include ns.e(content) using ($e) {
    @include t();
    position: relative;
  }

  @include ns.e(loading) using ($e) {
    opacity: 1;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    .use-rotate {
      height: 30%;
      width: 0;
    }
  }
  @include ns.e(image) using ($e) {
    @include t();
    opacity: 0;
    height: 300rpx;
  }
}
